<template>
	<view class="container">
		<!-- <page-meta>
		    <navigation-bar
		      :front-color="themes.nbFrontColor"
		      :background-color="themes.nbBackgroundColor"
		    />
		</page-meta> -->
		<view class="list-cell b-b m-t " @click="afterRead" style="align-items: center;" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">头像</text>
			<image class="touxiang" :src="infoDetail.head_portrait ? infoDetail.head_portrait : require('static/missing-face.png')" />
			<text style="align-self: auto;" class="cell-more yticon icon-you"></text>
		</view> 
		
		<!-- <view class="list-cell m-t b-b" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">用户ID</text>
			<text class="cell-tip">12121212</text>
			<text class="cell-more yticon icon-you"></text>
		</view> -->
		
		<view class="list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50" @click="navTo('./modify/modifyName?data='+infoDetail.nick_name)" >
			<text class="cell-tit">昵称</text>
			<text class="cell-tip">{{infoDetail.nick_name ? infoDetail.nick_name : '游客'}}</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		
		<view class="list-cell m-t b-b" hover-class="cell-hover" :hover-stay-time="50"  @click="navTo('./modify/modifySex?data='+infoDetail.sex)">
			<text class="cell-tit">性别</text>
			<text class="cell-tip">{{getSex()}}</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		
		<view class="list-cell m-t b-b" hover-class="cell-hover" :hover-stay-time="50"  @click="navTo('./modify/modifyBirthday?data='+infoDetail.birthday)" >
			<text class="cell-tit">出生日期</text>
			<text class="cell-tip">{{infoDetail.birthday ? infoDetail.birthday : '--'}}</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		
		<view class="list-cell m-t b-b" hover-class="cell-hover" :hover-stay-time="50" @click="navTo('./modify/modifyPhone?data='+infoDetail.phone)" >
			<text class="cell-tit">手机账号</text>
			<text class="cell-tip">{{infoDetail.phone ? infoDetail.phone : '--'}}</text>
			<text class="cell-more yticon icon-you"></text>
		</view>
		
		
		<!-- <view class="list-cell m-t b-b" @click="clearHis()" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">清除缓存</text>
			<text class="cell-more yticon icon-you"></text>
		</view> -->
		
		<view class="list-cell log-out-btn" @click="toLogout"><text style="color: #fa436a" class="cell-tit">退出登录</text></view>
	</view>
</template>

<script>

import {pathToBase64} from '@/common/image.js'; //图片上传转base64
export default {
	data() {
		return {
			
			infoDetail: {},   //用户信息
			modeThemes:'',
			version:'',
			checkUp:false,
		};
	},
	computed: {
		
	},
	onLoad() {
	
	},
	onShow(){
		this.getInfo()
	},
	methods: {
		
		getInfo(){
			
			this.$https.Mine.getUseInfo().then(req => {
				console.log('req',req)
				this.infoDetail = req
			})
		},
		
		navTo(url) {
			if(url == undefined){
				uni.showToast({
					title:'功能待开发',
					icon:'none'
				})
			}
			
			uni.navigateTo({
				url
			})
		},
		//退出登录
		toLogout() {
			uni.showModal({
				content: '确定要退出登录么',
				success: e => {
					if (e.confirm) {
						
						setTimeout(() => {
							uni.reLaunch({
								url:'./login/login'
							})
						}, 200);
					}
				}
			});
		},
		
		afterRead() {//选择头像
			uni.chooseImage({
			    count: 1, //默认9
			    success: async e=>{
					const path = await pathToBase64(e.tempFiles[0].path);
					this.getTouxiang(path);
				},
			});
		},
		getTouxiang(path){//上传头像
			this.$https.Mine.changeHeadImg(path).then(res=>{
				console.log('上传头像的信息',res)
				this.getInfo()
			})
		},
		getSex(){
			if(this.infoDetail){
				
				if(this.infoDetail.sex){
					
					if (this.infoDetail.sex == '1'){
						return '男'
					}else if (this.infoDetail.sex == '2'){
						return '女'
					}else{
						return '--'
					}
				}else{
					return '--'
				} 
				
			}else{
				return '--'
			}
		}
		
	}
};
</script>

<style lang="scss">
page {
	background: rgb(250,250,250);
}
.list-cell {
	display: flex;
	align-items: baseline;
	padding: 20upx 30upx;
	line-height: 60upx;
	position: relative;
	background: #fff;
	justify-content: center;
	&.log-out-btn {
		margin-top: 40upx;
		.cell-tit {
			color: $uni-color-error;
			text-align: center;
			margin-right: 0;
		}
	}
	&.cell-hover {
		background: #fafafa;
	}
	&.b-b:after {
		left: 30upx;
	}
	&.m-t {
		// margin-top: 16upx;
		border-bottom: 1upx solid #E4E7ED;
	}
	.cell-more {
		align-self: baseline;
		font-size: $uni-font-size-lg;
		color: #909399;
		margin-left: 10upx;
	}
	.cell-tit {
		flex: 1;
		font-size: $uni-font-size-base + 2rpx;
		color: #303133;
		
		// $font-color-dark: #303133;
		margin-right: 10upx;
	}
	.cell-tip {
		font-size: $uni-font-size-base;
		color: #909399;
		
		// $font-color-light: #909399;
	}
	switch {
		transform: translateX(16upx) scale(0.84);
	}
}
.touxiang {
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
}
</style>
